<template>
  <div class="home">
    <div class="header" :style="{ background: $colorObj.color }">
      <div class="logo">
        <span class="iconfont iconnew"> </span>
      </div>
      <div class="search">
        <span class="iconfont iconsearch"></span>
        搜索新闻
      </div>
      <span class="iconfont iconwode" @click="$router.push('/personal')"></span>
    </div>
    <van-tabs v-model="activeTab" sticky>
      <van-tab
        v-for="category in categoryList"
        :key="category.id"
        :title="category.name"
      >
        <van-list
          v-model="category.loading"
          :finished="category.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <PostItem
            v-for="item in category.postList"
            :key="item.id"
            :postData="item"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import PostItem from "@/components/PostItem";
export default {
  data() {
    return {
      activeTab: 1,
      categoryList: [],
    };
  },
  components: {
    PostItem,
  },
  methods: {
    getPost() {
      const currentcategory = this.categoryList[this.activeTab];
      // 如果栏目有数据则不在发送请求
      if (currentcategory.postList.length == 0) {
        this.$axios({
          url: "/post",
          params: {
            category: this.getCotegoryId,
            pageIndex: currentcategory.pageIndex,
            pageSize: currentcategory.pageSize,
          },
        }).then((res) => {
          currentcategory.postList = [
            ...currentcategory.postList,
            ...res.data.data,
          ];
          currentcategory.loading = false;
          if (res.data.data.length <= currentcategory.pageSize) {
            currentcategory.finished = true;
          }
        });
      }
    },
    onLoad() {
      this.categoryList[this.activeTab].pageIndex++;
      this.getPost();
    },
  },
  watch: {
    activeTab() {
      this.getPost();
    },
  },
  computed: {
    getCotegoryId() {
      const currentcategory = this.categoryList[this.activeTab];
      const categoryId = currentcategory.id;
      return categoryId;
    },
  },
  created() {
    this.$axios({
      url: "/category",
    }).then((res) => {
      const newData = res.data.data.map((category) => {
        return {
          ...category,
          postList: [],
          loading: false,
          finished: false,
          pageIndex: 1,
          pageSize: 5,
        };
      });
      this.categoryList = newData;
    });
  },
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  padding: 0 12 / 360 * 100vw;
  color: #fff;
  .logo {
    .iconnew {
      font-size: 42 / 360 * 100vw;
    }
  }
  .search {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 20 / 360 * 100vw;
    height: 32 / 360 * 100vw;
    line-height: 32 / 360 * 100vw;
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 14 / 360 * 100vw;
    justify-content: center;
    border-radius: 18 / 360 * 100vw;
    .iconsearch {
      margin-right: 6 / 360 * 100vw;
    }
  }
  .iconwode {
    font-size: 24 / 360 * 100vw;
  }
}
</style>
